<template>
  <div id="app">
    <h1>前端笔试题</h1>
    <h2>基于数据实现页面，最终效果如图所示：</h2>
    <ol>
      <li>有二维数据 <b>data</b>，将前 <b>categoryList.length</b> 列依次合并后显示。</li>
      <li>例如：先合并第一列，将所有为 <b>JOBS</b> 的单元格合并到一起</li>
      <li>在第一列都为 <b>JOBS</b> 的基础上，合并第二列，将同为 <b>2020-04-30</b> 的单元格合并到一起</li>
      <li>依次类推，知道所有 <b>categoryList</b> 所代表的列都合并完成为止</li>
      <li>之后的 <b>valueList</b> 列不合并，直接显示</li>
    </ol>
    <h2>要求：</h2>
    <ol>
      <li>不能假设 <b>categoryList</b> 的长度，提供的数据只是示例数据，算法应具有普遍性</li>
      <li>请注意代码规范，复杂的地方请加注释说明</li>
      <li>提示：虽然实现结果展示像表格，但是不要求一定按表格的方式实现</li>
    </ol>
    <img src="~./img.png" />
    <el-table :data="tempData"
              :span-method="objectSpanMethod"
              border
              style="width: 100%; margin-top: 20px">
      <el-table-column prop="service"
                       label="服务"
                       width="180">
      </el-table-column>
      <el-table-column prop="week"
                       label="周">
      </el-table-column>
      <el-table-column prop="data"
                       label="天">
      </el-table-column>
      <el-table-column prop="count"
                       label="计数">
      </el-table-column>
      <el-table-column prop="max"
                       label="最大值">
      </el-table-column>
    </el-table>
  </div>

</template>

<script>
export default {
  data() {
    return {
      data: [
        ["JOBS", "2020-04-30", "2020-05-03", 4, 60],
        ["JOBS", "2020-04-30", "2020-05-04", 2, 60],
        ["JOBS", "2020-04-30", "2020-05-05", 2, 60],
        ["JOBS", "2020-04-30", "2020-05-06", 2, 60],
        ["JOBS", "2020-05-07", "2020-05-07", 2, 60],
        ["JOBS", "2020-05-21", "2020-05-25", 2, 60],
        ["JOBS", "2020-05-21", "2020-05-26", 2, 60],
        ["JOBS", "2020-05-21", "2020-05-27", 2, 60],
        ["JOBS", "2020-05-28", "2020-05-28", 2, 60],
        ["JOBS", "2020-05-28", "2020-05-29", 2, 60],
        ["MCMS", "2020-04-30", "2020-05-04", 2, 60],
        ["MCMS", "2020-04-30", "2020-05-05", 2, 60],
        ["MCMS", "2020-04-30", "2020-05-06", 2, 60],
        ["MCMS", "2020-05-07", "2020-05-07", 2, 60],
        ["MCMS", "2020-05-07", "2020-05-08", 2, 60],
        ["MCMS", "2020-05-21", "2020-05-26", 2, 60],
        ["MCMS", "2020-05-21", "2020-05-27", 2, 60],
        ["MCMS", "2020-05-28", "2020-05-28", 2, 60],
        ["MCMS", "2020-05-28", "2020-05-29", 2, 60],
        ["payerror", "2020-04-30", "2020-05-03", 7, 60],
        ["payerror", "2020-04-30", "2020-05-04", 5, 60],
        ["payerror", "2020-04-30", "2020-05-05", 2, 60],
        ["payerror", "2020-04-30", "2020-05-06", 2, 60],
        ["payerror", "2020-05-07", "2020-05-07", 2, 60],
        ["payerror", "2020-05-21", "2020-05-25", 5, 60],
        ["payerror", "2020-05-21", "2020-05-26", 5, 60],
        ["payerror", "2020-05-21", "2020-05-27", 5, 60],
        ["payerror", "2020-05-28", "2020-05-28", 5, 60],
        ["payerror", "2020-05-28", "2020-05-29", 5, 60],
        ["ZSWAPSTD", "2020-04-30", "2020-05-03", 6, 60],
        ["ZSWAPSTD", "2020-04-30", "2020-05-04", 173, 60],
        ["ZSWAPSTD", "2020-04-30", "2020-05-05", 173, 60],
        ["ZSWAPSTD", "2020-04-30", "2020-05-06", 173, 60],
        ["ZSWAPSTD", "2020-05-07", "2020-05-07", 116, 60],
        ["ZSWAPSTD", "2020-05-21", "2020-05-25", 146, 60],
        ["ZSWAPSTD", "2020-05-21", "2020-05-26", 146, 60],
        ["ZSWAPSTD", "2020-05-21", "2020-05-27", 95, 60],
        ["ZSWAPSTD", "2020-05-28", "2020-05-28", 173, 60],
        ["ZSWAPSTD", "2020-05-28", "2020-05-29", 173, 60],
        ["信息总中心", "2020-04-30", "2020-05-03", 6, 50],
        ["信息总中心", "2020-04-30", "2020-05-04", 4, 50],
        ["信息总中心", "2020-04-30", "2020-05-05", 6, 50],
        ["信息总中心", "2020-04-30", "2020-05-06", 8, 50],
        ["信息总中心", "2020-05-07", "2020-05-07", 8, 50],
        ["信息总中心", "2020-05-07", "2020-05-08", 4, 50],
        ["信息总中心", "2020-05-21", "2020-05-25", 4, 50],
        ["信息总中心", "2020-05-21", "2020-05-26", 8, 50],
        ["信息总中心", "2020-05-21", "2020-05-27", 8, 50],
        ["信息总中心", "2020-05-28", "2020-05-28", 6, 50],
        ["信息总中心", "2020-05-28", "2020-05-29", 6, 50],
      ],
      categoryList: ["服务", "周", "天"],
      valueList: ["计数", "最大值"],
      tempData: [],
    };
  },
  methods: {

    // 处理数据
    handleData() {
      // let =this.data[0]
      this.tempData = this.data.map(ele => {
        let obj = {
          service: "",
          week: "",
          data: "",
          count: "",
          max: ""
        }
        obj.service = ele[0]
        obj.week = ele[1]
        obj.data = ele[2]
        obj.count = ele[3]
        obj.max = ele[4]
        return obj
      });



    },
    // 合并表格方法
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        let total = this.tableMerge['service'][rowIndex]
        if (total) {
          return [total, 1]
        } else {
          return [0, 0]
        }

      }
      if (columnIndex === 1) {
        let total = this.tableMerge['week'][rowIndex]
        if (total) {
          return [total, 1]
        } else {
          return [0, 0]
        }

      }
      if (columnIndex === 2) {
        let total = this.tableMerge['data'][rowIndex]
        if (total) {
          return [total, 1]
        } else {
          return [0, 0]
        }

      }
    },
    getMergeSpan(tableData, spans) {
      let rowMerge = {}, obj = {}
      for (let i = 0; i < spans.length; i++) {
        let property = spans[i].key
        let rely = spans[i].rely
        let total = 1, start = 0
        tableData.forEach((item, index) => {
          let nextRow = tableData[index + 1] || {}
          let isComRely = rely ? item[rely] === nextRow[rely] : true
          if (item[property] === nextRow[property] && isComRely) {
            total++
          } else {
            obj[start] = total
            start = index + 1
            total = 1
          }
        })
        rowMerge[property] = obj
        obj = {}
      }
      return rowMerge
    }
  },
  created() {
    this.handleData()
    this.tableMerge = this.getMergeSpan(this.tempData, [{ key: 'service' }, { key: 'week' }, { key: 'data' }])

  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
